<!-- 加盟商员工列表选择组件 -->
<template>
    <div>
        <el-select v-model="selectedValue" filterable clearable placeholder="选择员工" @change="change" @clear="clear">
            <el-option
                v-for="item in selectList"
                :key="item.userid"
                :label="item.name"
                :value="item.userid">
            </el-option>
        </el-select>

        <!-- <el-autocomplete style="width: 100%;" v-model="selectedValue" :fetch-suggestions="querySearch" value-key="name"
            label="mobile" placeholder="请输入内容" @select="handleSelect">
            <template slot-scope="{ item }">
                <div class="flex">
                    <div class="name e-flex-1">{{ item.name }}</div>
                    <span class="mobile">{{ item.mobile }}</span>
                </div>
            </template>
        </el-autocomplete> -->
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: [Number, String, Array],
            default: null
        }
    },
    data() {
        return {
            selectList: [],
            selectedValue: this.value // 使用本地 data 属性来保存选中的值
        }
    },
    watch: {
        value: {
            immediate: true,
            handler(newVal) {
                this.selectedValue = newVal; // 监听外部变化以保持同步
            }
        }
    },
    mounted() {
        this.getselectList()
    },
    methods: {
        async querySearch(queryString, cb) {
            // 假设这是你的原始数据
            const data = this.selectList;

            const results = queryString
                ? data.filter(item => {
                    const nameMatch = item.name.toLowerCase().includes(queryString.toLowerCase());
                    const mobileMatch = item.mobile.includes(queryString);
                    return nameMatch || mobileMatch;
                })
                : data;

            // 转换数据格式为 { value: '显示值', item: 原始对象 }
            // const formattedResults = results.map(item => ({
            //     value: `${item.name}(${item.mobile})`, // 显示格式
            //     item // 保留原始数据
            // }));

            cb(results);
        },
        handleSelect(item) {
            console.log('handleSelect', item);
            this.$emit('select',item)
            this.$emit('change',item)
            this.$emit('input',item.userid)
        },
        getselectList() {
            return this.$axios.post('/Franchise/Staff/List', {
                "PageIndex": 1,
                "PageSize": 1000,
                "Key": "",
                // "franchiseid": this.franchiseid
            }).then((res) => {
                this.selectList = res.rows
                return res.rows
            }).catch((err) => {

            })
        },
        clear() {
            this.change()
        },
        change() {
            console.log(this.selectedValue)
            this.$emit('change', this.selectList.find((item) => item.id == this.selectedValue)); // 触发 change 事件传递新值
            this.$emit('input', this.selectedValue); // 如果支持 v-model，则也触发 input 事件
        }
    }
}
</script>

<style scoped>
/* 添加样式以更好地展示双字段匹配 */
.name {
    /* font-weight: bold; */
}

.mobile {
    color: #8492a6; 
    font-size: 13px
}
</style>